<template>
	<div>
		<el-form :model="mechanismData">
			<table class="form-table" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
			  	<tbody>
			  		<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mec.OrganizationInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mec.Name1')}}*</td>
				  		<td><input v-model.lazy="mecALLData.companyName" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.RegisterAddress')}}</td>
				  		<td><input v-model.lazy="mecALLData.address" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.businessLicenseNo')}}</td>
				  		<td><input v-model.lazy="mecALLData.businessLicenseNo" type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mec.validityTime')}}</td>
				  		<td><input v-model.lazy="mecALLData.businessLicenseExpiryDate" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.LegalPerson')}}</td>
				  		<td><input v-model.lazy="mecALLData.corporate" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.certificateType')}}</td>
				  		<td><input v-model.lazy="mecALLData.legalRepresentativeType" type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mec.certificateNo')}}</td>
				  		<td><input v-model.lazy="mecALLData.legalRepresentativeCertificateNo" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.PhoneNo')}}</td>
				  		<td><input v-model.lazy="mecALLData.legalRepresentativePhone" type="text" :disabled="showDetails"/></td>
				  		<td v-if="this.id===2">{{$t('mec.CreationTime')}}</td>
						<td v-else></td>  
				  		<td><input v-if="this.id===2" v-model.lazy="mecALLData.addedDate" type="text" disabled=true/></td>
				  	</tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mec.Contact')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mec.Name')}}</td>
				  		<td><input v-model.lazy="mecALLData.director" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.PhoneNo')}}</td>
				  		<td><input v-model.lazy="mecALLData.phone" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.Email')}}</td>
				  		<td><input v-model.lazy="mecALLData.email" type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mec.SettlementInfo')}}</div>
			  			</td>
			  		</tr>
				  	<tr>
				  		<td>{{$t('mec.SettlementBank')}}</td>
				  		<td><input v-model.lazy="mecALLData.liquidationBankName" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.City')}}</td>
				  		<td><input v-model.lazy="mecALLData.bankBelongCity" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.AccountType')}}</td>
				  		<td><input v-model.lazy="mecALLData.accountType" type="text" :disabled="showDetails"/></td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mec.AccountName')}}</td>
				  		<td><input v-model.lazy="mecALLData.accountName" type="text" :disabled="showDetails"/></td>
				  		<td>{{$t('mec.AccountNo')}}</td>
				  		<td><input v-model.lazy="mecALLData.settlementAccountNo" type="text" :disabled="showDetails"/></td>
				  		<td></td>
				  		<td></td>
				  	</tr>
				  	
				  	<tr>
			  			<td colspan="6" style="text-align: left;">
			  				<div class="table-head">{{$t('mec.PhotoInfo')}}</div>
			  			</td>
			  		</tr>
			  		<tr>
				  		<td>{{$t('mec.LegalPersonIDFrontPicture')}}</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleImgSucces_1" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.idcardPositiveUrl" :src="mecALLData.idcardPositiveUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleImgSucces_1" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.idcardPositiveUrl" class="imgBox">
		  							<img :src="mecALLData.idcardPositiveUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg1()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mec.LegalPersonIDReversePicture')}}</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleImgSucces_2" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.idcardNegativeUrl" :src="mecALLData.idcardNegativeUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleImgSucces_2" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.idcardNegativeUrl" class="imgBox">
		  							<img :src="mecALLData.idcardNegativeUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg2()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mec.LegalPersonBankcardFrontPicture')}}</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleImgSucces_3" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.bankCardPositiveUrl" :src="mecALLData.bankCardPositiveUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleImgSucces_3" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.bankCardPositiveUrl" class="imgBox">
		  							<img :src="mecALLData.bankCardPositiveUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg3()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mec.LegalPersonBankcardReversePicture')}}</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleImgSucces_4" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.bankCardNegativeUrl" :src="mecALLData.bankCardNegativeUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleImgSucces_4" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.bankCardNegativeUrl" class="imgBox">
		  							<img :src="mecALLData.bankCardNegativeUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg4()">×</span>
		  						</div>
				    			<i class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mec.BusinessLicense')}}</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleImgSucces_5" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.businessLicenseUrl" :src="mecALLData.businessLicenseUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleImgSucces_5" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.businessLicenseUrl" class="imgBox">
		  							<img :src="mecALLData.businessLicenseUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg5()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mec.TaxRegistrationCertificate')}}</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleImgSucces_6" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.taxRegistrationCertificateUrl" :src="mecALLData.taxRegistrationCertificateUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleImgSucces_6" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.taxRegistrationCertificateUrl" class="imgBox">
		  							<img :src="mecALLData.taxRegistrationCertificateUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg6()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  	</tr>
				  	<tr>
				  		<td>{{$t('mec.OrganizationCodeCertificate')}}</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleImgSucces_7" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.organizationCodeCertificateUrl" :src="mecALLData.organizationCodeCertificateUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleImgSucces_7" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.organizationCodeCertificateUrl" class="imgBox">
		  							<img :src="mecALLData.organizationCodeCertificateUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg7()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mec.CompanyFrontPicture')}}</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleImgSucces_8" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.companyPositiveUrl" :src="mecALLData.companyPositiveUrl">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleImgSucces_8" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.companyPositiveUrl" class="imgBox">
		  							<img :src="mecALLData.companyPositiveUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg8()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  		<td>{{$t('mec.CompanyLogo')}}*</td>
				  		<td>
				  			<!--<el-upload :disabled="showDetails" action="/api/share/picture/upload" :show-file-list="false" :on-success="handleLogoSuccess" name="upfile" list-type="picture" :headers="headers">
		  						<img v-if="mecALLData.companyLogoUrl" :src="mecALLData.companyLogoUrl" class="avatar">
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>-->
				  			<el-upload action="/api/share/picture/upload" :before-upload="beforeImgUpload" :disabled="showDetails" :show-file-list="false" :on-success="handleLogoSuccess" name="upfile" list-type="picture" :headers="headers">
				  				<div v-if="mecALLData.companyLogoUrl" class="imgBox">
		  							<img :src="mecALLData.companyLogoUrl" class="avatar imgNow">
		  							<span class="delImg" v-show='!showDetails' @click="delImg()">×</span>
		  						</div>
				    			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
				  		</td>
				  	</tr>
			  	</tbody>
			</table>
			<div class="btn-box">
			    <el-button  class="blue-btn small-btn" @click="cancel()">{{$t('button.Cancel')}}</el-button>
			    <el-button  class="green-btn small-btn" v-if='isAdd' @click="addMec()">{{$t('salesman.OK')}}</el-button>
			    <el-button  class="green-btn small-btn" v-if='isModify' @click='modify()'>{{$t('button.Modify')}}</el-button>
			    <el-button  class="blue-btn small-btn" v-show='showBtn' @click='commitModify()'>{{$t('button.OK')}}</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
import { getMecSingle, mecSave, mecUpdate } from "api/mechanism/index";
export default {
  name: "mecAdd",
  props: ["id", "detailsData"],
  data() {
    return {
      isAdd: this.id === 1 ? true : false,
      isModify: this.id === 2 ? true : false,
      showDetails: this.id === 1 ? false : true,
      showBtn: false,
      nullObj: {},
      mechanismData: {},
      headers: { "access-token": localStorage.getItem("access-token") },
      //绑定机构详情 修改 新增的数据
      mecALLData: {
        companyName: undefined,
        address: undefined,
        businessLicenseNo: undefined,
        businessLicenseExpiryDate: undefined,
        corporate: undefined,
        legalRepresentativeType: undefined,
        legalRepresentativeCertificateNo: undefined,
        legalRepresentativePhone: undefined,
        addedDate: undefined,
        director: undefined,
        phone: undefined,
        email: undefined,
        liquidationBankName: undefined,
        bankBelongCity: undefined,
        accountType: undefined,
        accountName: undefined,
        settlementAccountNo: undefined,
        idcardPositiveUrl: "",
        idcardNegativeUrl: "",
        bankCardPositiveUrl: "",
        bankCardNegativeUrl: "",
        businessLicenseUrl: "",
        taxRegistrationCertificateUrl: "",
        organizationCodeCertificateUrl: "",
        companyPositiveUrl: "",
        companyLogoUrl: ""
      }
    };
  },
  created() {
    //			console.log(this.id);
    //			console.log(this.detailsData);
    this.mecALLData = this.detailsData;
    // console.log(this.mecALLData);
  },
  methods: {
    beforeImgUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message(this.$t('hint.ThePictureSizeMustNotExceed5M'));
      }
      return isLt2M;
    },
    //上传图片
    handleLogoSuccess(res) {
      this.$set(this.mecALLData, "companyLogoUrl", res.value);
    },
    handleImgSucces_1(res) {
      this.$set(this.mecALLData, "idcardPositiveUrl", res.value);
    },
    handleImgSucces_2(res) {
      this.$set(this.mecALLData, "idcardNegativeUrl", res.value);
    },
    handleImgSucces_3(res) {
      this.$set(this.mecALLData, "bankCardPositiveUrl", res.value);
    },
    handleImgSucces_4(res) {
      this.$set(this.mecALLData, "bankCardNegativeUrl", res.value);
    },
    handleImgSucces_5(res) {
      this.$set(this.mecALLData, "businessLicenseUrl", res.value);
    },
    handleImgSucces_6(res) {
      this.$set(this.mecALLData, "taxRegistrationCertificateUrl", res.value);
    },
    handleImgSucces_7(res) {
      this.$set(this.mecALLData, "organizationCodeCertificateUrl", res.value);
    },
    handleImgSucces_8(res) {
      this.$set(this.mecALLData, "companyPositiveUrl", res.value);
    },
    //删除图片
    delImg() {
      this.$set(this.mecALLData, "companyLogoUrl", undefined);
    },
    delImg1() {
      this.$set(this.mecALLData, "idcardPositiveUrl", undefined);
    },
    delImg2() {
      this.$set(this.mecALLData, "idcardNegativeUrl", undefined);
    },
    delImg3() {
      this.$set(this.mecALLData, "bankCardPositiveUrl", undefined);
    },
    delImg4() {
      this.$set(this.mecALLData, "bankCardNegativeUrl", undefined);
    },
    delImg5() {
      this.$set(this.mecALLData, "businessLicenseUrl", undefined);
    },
    delImg6() {
      this.$set(this.mecALLData, "taxRegistrationCertificateUrl", undefined);
    },
    delImg7() {
      this.$set(this.mecALLData, "organizationCodeCertificateUrl", undefined);
    },
    delImg8() {
      this.$set(this.mecALLData, "companyPositiveUrl", undefined);
    },
    //新增机构取消
    cancel() {
      if (this.id === 1) {
        this.$emit("mecAddChange");
      } else {
        if (this.isModify) {
          this.$emit("mecAddChange");
        } else {
          this.showDetails = true;
          this.showBtn = false;
          this.isModify = true;
        }
      }
    },
    modify() {
      this.showDetails = false;
      this.showBtn = true;
      this.isModify = false;
    },
    //机构修改按成按钮
    commitModify() {
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: this.$t("hint.SureToChangeInfoOfTheOrganization"),
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel")
      }).then(() => {
        mecUpdate(this.mecALLData).then(res => {
          if (res.code === 0) {
            //		        			this.$emit('mecAddChange');
            this.$notify({
              title: this.$t("hint.Success"),
              message: this.$t("hint.SuccessfullyModified"),
              type: "success",
              duration: 2000
            });
          } else {
            this.$notify({
              title: this.$t("hint.Fail"),
              message: this.$t("hint.FailToEdit"),
              type: "error",
              duration: 2000
            });
          }
        });
      });
    },
    addMec() {
      this.$msgbox({
        title: this.$t("hint.Alert"),
        message: this.$t("hint.SureToAddThisOrganization"),
        showClose: false,
        showCancelButton: true,
        confirmButtonText: this.$t("button.OK"),
        cancelButtonText: this.$t("button.Cancel"),
        beforeClose: (action, instance, done) => {
          done();
        }
      }).then(() => {
        //		        	this.mecALLData.idcardPositiveUrl = this.idcardPositiveUrl,
        //					this.mecALLData.idcardNegativeUrl = this.idcardNegativeUrl,
        //					this.mecALLData.bankCardPositiveUrl = this.bankCardPositiveUrl,
        //					this.mecALLData.bankCardNegativeUrl = this.bankCardNegativeUrl,
        //					this.mecALLData.businessLicenseUrl = this.businessLicenseUrl,
        //					this.mecALLData.taxRegistrationCertificateUrl = this.taxRegistrationCertificateUrl,
        //					this.mecALLData.organizationCodeCertificateUrl = this.organizationCodeCertificateUrl,
        //					this.mecALLData.companyPositiveUrl = this.companyPositiveUrl,
        //					this.mecALLData.companyLogoUrl = this.companyLogoUrl,
        mecSave(this.mecALLData).then(res => {
          if (res.code === 0) {
            this.$notify({
              title: this.$t("hint.Success"),
              message: this.$t("hint.OperationSuccess"),
              type: "success",
              duration: 2000
            });
          } else {
            this.$notify({
              title: this.$t("hint.Fail"),
              message: this.$t("hint.OperationFail"),
              type: "error",
              duration: 2000
            });
          }
        });
      });
    }
  }
};
</script>

<style>

</style>